<template>
     <CardBox title="网易云热度榜" icon="default/information/Music.png" :refresh="this.refresh">
      <div slot="body" v-if="MusicHotData?.length>0">
         <button v-for="item in MusicHotData?.slice(0,5)" :key="item.id" class="DataOne flex" @click="ToMusic(item.searchWord)">
               <div class="name FontWeight overflow">{{item.searchWord}}</div>
               <i class="el-icon-arrow-right FontWeight"></i>
         </button>
      </div>
     
   </CardBox>
</template>
<script>
import CardBox from '@/components/Package/CardBox/CardBox.vue'
import {mapActions,mapMutations,mapState} from 'vuex'
  export default 
  {
  components: { CardBox },
     name :'', 
     methods:{
        ...mapActions('Init',['getMusicHotData']),
        ...mapActions('Music',['getSearchResult']),
        ...mapMutations('Music',['SETSTATE']),
        //刷新数据,
       async refresh(){
         return await this.getMusicHotData()
        },

        ToMusic(searchWord){
           this.SETSTATE(2)
           this.getSearchResult(searchWord)
        },
    
     
     },
     computed:{
        ...mapState('Init',['MusicHotData'])
     },
    
  }
</script>
<style scoped lang='less'>
.FontWeight{
    font-size: 18px;
    color: var(--fontColor);
}

.DataOne{
    width: 100%;
    justify-content: flex-start;
    height: 40px;
     color: var(--fontColor);

    position: relative;
    border-radius: 7px;

    padding: 10px;
    box-sizing: border-box;

    margin-top: 5px;

    .name{
        width: 70%;
        margin-left: 5px;
        text-align: left;
    }

   
    i{
        position: absolute;
        right: 10px;
    }
}
.DataOne:hover{
    .FontWeight{
        color: var(--GeneralBackColor);
    }
}
</style>